<template>
	<div>
		<div class="header_wrap">
			<div class="header_left lf">
				<a href="index.html"><img src="../static/images/logo.png" /></a>
			</div>
			<div class="header_center lf">
				<div class="search_wrap">
					<select class="lf" name="">
						<option value="">商品</option>
					</select>
					<input class="lf search_content" type="text" />
					<input class="lf search_btn" type="button" name="" id="" value="搜索" />
				</div>
			</div>
			<div class="header_right lf">
				<div class="lf phone_logo">
					<img src="../static/images/icon_phone.jpg" />
				</div>
				<div class="lf">
					<p class="service_title">客户服务电话</p>
					<p class="service_num">4006007272</p>
				</div>
			</div>
		</div>
		<!--菜单部分-->
		<div class="menu">
			<div class="menu_inner">
				<ul>
					<li class="whole_goods_menu selected">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liebiaoshitucaidan"></use>
						</svg>
						<a href="javascript:void(0)">全部商品分类</a>
					</li>
					<li class="active">
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="product.html">宠物商品</a>
					</li>
				</ul>
				<!--下拉菜单-->
				<div class="drop_down_menu">
					<ul>
						<li class="active" belongto="dog">
							<span class="drop_down_menu_text">狗狗专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="cat">
							<span class="drop_down_menu_text">猫咪专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="pet">
							<span class="drop_down_menu_text">小宠专区</span>
							<span class="arrow">&gt;</span>
						</li>
					</ul>
				</div>
				<div class="down_menu_right" belongto='dog'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>
						<!--<dd>爱丽思IRIS</dd>
					<dd>爱丽思IRIS</dd>
					<dd>爱丽思IRIS</dd>-->
					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>
						<!--<dd>户外出行</dd>
					<dd>营养食品</dd>
					<dd>洗浴清洁</dd>
					<dd>玩具用品</dd>-->
					</dl>
				</div>
				<div class="down_menu_right" belongto='cat'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
				<div class="down_menu_right" belongto='pet'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
			</div>
		</div>
		<!--轮播图部分-->
		<div class="banner">
			<div id="container">
				<div class="sections">
					<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide v-for="item in bannerList" :key="item.banner">
							<img :src="src + item.banner" style="height: 750px;">
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
			</div>
		</div>
		<!--中间商品内容-->
		<div class="content">
			<!--1F 狗狗专区-->
			<div class="goods dog_goods" data-catorgery="dog">
				<div class="goods_title_wrap">
					<div class="goods_title_lf">
						1F 狗狗专区
					</div>
					<div class="goods_title_rg">
						<ul>
							<li class="active">医疗保健</li>
							<li>户外出行</li>
							<li>营养食品</li>
							<li>洗浴清洁</li>
							<li>玩具用品</li>
						</ul>
					</div>
				</div>
				<div class="goods_content_wrap">
					<div class="goods_content_lf">
						<!--左边品牌展示 和选择-->
						<div class="brand">
							<ul>
								<li>爱丽思IRIS</li>
								<li>伊丽Elite</li>
								<li>凯瑞CATRY</li>
								<li>田田猫AICC</li>
								<li>Amy&Carol</li>
								<li>爱旺</li>
								<li>麦德氏</li>
							</ul>
						</div>
					</div>
					<div class="goods_content_rg">
						<ul>
							<li>
								<div class="goods_pic">
									<img src="../static/images/product.jpg" />
								</div>
								<p>比瑞吉天然大型犬幼犬专用狗粮营养型（15kg）</p>
								<div class="goods_price_wrap">
									<div class="original_price lf">
										<span>&#65509;</span>
										<span>29.90</span>
									</div>
									<div class="member_price lf">
										<span>会员价：</span>
										<span class="line_througth">&yen;</span>
										<span class="line_througth">38.90</span>
									</div>
									<div class="goods_car rg">

									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!--2F 猫咪专区-->
			<div class="goods cat_goods" data-catorgery="cat">
				<div class="goods_title_wrap">
					<div class="goods_title_lf">
						2F 猫咪专区
					</div>
					<div class="goods_title_rg">
						<ul>

						</ul>
					</div>
				</div>
				<div class="goods_content_wrap">
					<div class="goods_content_lf">
						<!--左边品牌展示 和选择-->
						<div class="brand">
							<ul>

							</ul>
						</div>
					</div>
					<div class="goods_content_rg">
						<ul>

						</ul>
					</div>
				</div>
			</div>

			<!--3F 小宠专区-->
			<div class="goods other_pet_goods" data-catorgery="pet">
				<div class="goods_title_wrap">
					<div class="goods_title_lf">
						3F 小宠专区
					</div>
					<div class="goods_title_rg">
						<ul>

						</ul>
					</div>
				</div>
				<div class="goods_content_wrap">
					<div class="goods_content_lf">
						<!--左边品牌展示 和选择-->
						<div class="brand">
							<ul>

							</ul>
						</div>
					</div>
					<div class="goods_content_rg">
						<ul>

						</ul>
					</div>
				</div>
			</div>

			<!--合作商家-->
			<div class="cooperative_business">
				<h2>合作商家 <span>好合作，好伙伴</span></h2>
				<hr />
				<div class="business_logo_wrap">
					<ul>
						<li><img src="../static/images/commuction.jpg" /></li>
						<li><img src="../static/images/commuction.jpg" /></li>
						<li><img src="../static/images/commuction.jpg" /></li>
						<li><img src="../static/images/commuction.jpg" /></li>
						<li><img src="../static/images/commuction.jpg" /></li>
					</ul>
				</div>
			</div>
			<!--友情链接-->
			<div class="firendly_link">
				<span>友情链接:</span>
				<ul>
					<li>
						<a href="#">爱贝宠网站</a>
					</li>
					<li>
						<a href="#">爱贝宠网站</a>
					</li>

					<li>
						<a href="#">爱贝宠网站</a>
					</li>
					<li>
						<a href="#">爱贝宠网站</a>
					</li>
					<li>
						<a href="#">爱贝宠网站</a>
					</li>

				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			var self = this
			self.$api.get('public/index.php/api/index/pchome', null, r => {
				console.log('首页获取r', r)
				if(r.code === 200){
					self.bannerList = r.data.banner
				}else{
					
				}
				
			})
		},
		data() {
			return {
				bannerList: [],
				swiperOption: {
					initialSlide: 0,
					src: this.$src,
					pagination: {
						el: '.swiper-pagination',
					},
					loop: true,
					speed: 400,
					autoplay: {
						delay: 4500,
						disableOnInteraction: false,
					},
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true //修改swiper的父元素时，自动初始化swiper
				}
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>